<template>
<!--  <h1>{{query }}</h1>-->
<!--  <h1>{{searchWord}}</h1>-->
  <div class="container-fluid">
    <div class="row">
      <div class="col-2"></div>
      <div class="col-8">
        <div class="row" style="margin-top: 10%">
          <div class="col-2"><a href="javascript:" @click="query.tagID=null"> 全部 </a></div>
          <div class="col-2"><a href="javascript:" @click="query.tagID=1"> 学习 </a></div>
          <div class="col-2"><a href="javascript:" @click="query.tagID=2"> 科技 </a></div>
          <div class="col-2"><a href="javascript:" @click="query.tagID=3"> 生活 </a></div>
          <div class="col-2"><a href="javascript:" @click="query.tagID=4"> 运动 </a></div>
<!--          <div class="col-2">-->
<!--            <select class="form-select border-0" aria-label="Default select example" style="padding: 0px;font-size: 20px">-->
<!--              <option selected><div style="text-align: center">更多</div></option>-->
<!--              <option value="0" @click="query.tagID=5"> 游戏 </option>-->
<!--              <option value="1" @click="query.tagID=6"> 娱乐 </option>-->
<!--              <option value="2" @click="query.tagID=7"><a href="javascript:">艺术</a></option>-->
<!--            </select></div>-->
            <li class="col-2 dropdown list-unstyled">
              <a href="javascript:" class="nav-link p-0 d-block link-dark text-decoration-none dropdown-toggle" id="dropdownType" data-bs-toggle="dropdown" aria-expanded="false">
                其他
              </a>
              <ul class="dropdown-menu text-small">
                <li><a class="dropdown-item" href="javascript:" v-on:click="query.tagID=5">游戏</a></li>
                <li><a class="dropdown-item" href="javascript:" @click="query.tagID=6">娱乐</a></li>
                <li><a class="dropdown-item" href="javascript:" v-on:click="query.tagID=7">艺术</a></li>
              </ul>
            </li>

          <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>
        </div>
        <!--        列表部分,每页20个-->
        <div class="row row-cols-1 row-cols-md-5 g-4">
          <div class="col" v-for="(v,k) in thisPageVideo" :key="k" @click="playVideo(v.videoid,true)">
            <div class="card" >
              <a href="javascript:"><img :src="request.pic(v.cover_pic)" class="card-img-top" alt="..."></a>
              <div class="card-body ">
                <h6  class="card-title"><a href="javascript:"><div class="line-limit-length">{{ v.title }}</div></a></h6>
                <p class="card-text,line-limit-length"><small>播放量:{{ v.play_num }}<br>{{ v.up_time.slice(0,10) }}</small></p>
                <p class="card-text"><small>作者id {{ v.uuid }}</small></p>
              </div>
            </div>
          </div>
          <!--          <div class="col">
                      <div class="card" >
                        <a href="javascript:"><img src="../assets/3.jpg" class="card-img-top" alt="..."></a>
                        <div class="card-body">
                          <h6 class="card-title"><a href="javascript:">标题</a></h6>
                          <p class="card-text"><small>播放量  上传时间</small></p>
                          <p class="card-text"><small>作者</small></p>
                        </div>
                      </div>
                    </div>
                    <div class="col">
                      <div class="card" >
                        <a href="javascript:"><img src="../assets/3.jpg" class="card-img-top" alt="..."></a>
                        <div class="card-body">
                          <h6 class="card-title"><a href="javascript:">标题</a></h6>
                          <p class="card-text"><small>播放量  上传时间</small></p>
                          <p class="card-text"><small>作者</small></p>
                        </div>
                      </div>
                    </div>
                    <div class="col">
                      <div class="card" >
                        <a href="javascript:"><img src="../assets/3.jpg" class="card-img-top" alt="..."></a>
                        <div class="card-body">
                          <h6 class="card-title"><a href="javascript:">标题</a></h6>
                          <p class="card-text"><small>播放量  上传时间</small></p>
                          <p class="card-text"><small>作者</small></p>
                        </div>
                      </div>
                    </div>
                    <div class="col">
                      <div class="card" >
                        <a href="javascript:"><img src="../assets/3.jpg" class="card-img-top" alt="..."></a>
                        <div class="card-body">
                          <h6 class="card-title"><a href="javascript:">标题</a></h6>
                          <p class="card-text"><small>播放量  上传时间</small></p>
                          <p class="card-text"><small>作者</small></p>
                        </div>
                      </div>
                    </div>
                    <div class="col">
                      <div class="card" >
                        <a href="javascript:"><img src="../assets/3.jpg" class="card-img-top" alt="..."></a>
                        <div class="card-body">
                          <h6 class="card-title"><a href="javascript:">标题</a></h6>
                          <p class="card-text"><small>播放量  上传时间</small></p>
                          <p class="card-text"><small>作者</small></p>
                        </div>
                      </div>
                    </div>
                    <div class="col">
                      <div class="card" >
                        <a href="javascript:"><img src="../assets/3.jpg" class="card-img-top" alt="..."></a>
                        <div class="card-body">
                          <h6 class="card-title"><a href="javascript:">标题</a></h6>
                          <p class="card-text"><small>播放量  上传时间</small></p>
                          <p class="card-text"><small>作者</small></p>
                        </div>
                      </div>
                    </div>
                    <div class="col">
                      <div class="card" >
                        <a href="javascript:"><img src="../assets/3.jpg" class="card-img-top" alt="..."></a>
                        <div class="card-body">
                          <h6 class="card-title"><a href="javascript:">标题</a></h6>
                          <p class="card-text"><small>播放量  上传时间</small></p>
                          <p class="card-text"><small>作者</small></p>
                        </div>
                      </div>
                    </div>
                    <div class="col">
                      <div class="card" >
                        <a href="javascript:"><img src="../assets/3.jpg" class="card-img-top" alt="..."></a>
                        <div class="card-body">
                          <h6 class="card-title"><a href="javascript:">标题</a></h6>
                          <p class="card-text"><small>播放量  上传时间</small></p>
                          <p class="card-text"><small>作者</small></p>
                        </div>
                      </div>
                    </div>
                    <div class="col">
                      <div class="card" >
                        <a href="javascript:"><img src="../assets/3.jpg" class="card-img-top" alt="..."></a>
                        <div class="card-body">
                          <h6 class="card-title"><a href="javascript:">标题</a></h6>
                          <p class="card-text"><small>播放量  上传时间</small></p>
                          <p class="card-text"><small>作者</small></p>
                        </div>
                      </div>
                    </div>-->
        </div>
        <!--        分页部分-->
        <div aria-label="Page navigation example" v-if="num>0">
          <ul class="pagination pagination-centered" >
            <li :class="'page-item '+(query.pageIndex==1?'disabled':'')"><a class="page-link" href="javascript:" @click="query.pageIndex--">上一页</a></li>
            <template v-for="pageMark in pageNum" :key="pageMark">
              <li :class="'page-item '+(pageMark==query.pageIndex?'active':'')"><a class="page-link" href="javascript:" @click="query.pageIndex=pageMark">{{ pageMark }}</a></li>
            </template>
            <!--            <li class="page-item"><a class="page-link" href="javascript:">2</a></li>
                        <li class="page-item"><a class="page-link" href="javascript:">3</a></li>-->
            <li :class="'page-item '+(query.pageIndex==pageNum?'disabled':'')"><a class="page-link" href="javascript:" @click="query.pageIndex++">下一页</a></li>
          </ul>
        </div>
        <div class="jumbotron m-5" v-else>
          <h1>没有查询到符合条件的视频</h1>
        </div>
      </div>
      <div class="col-2"></div>
    </div>
  </div>
</template>

<!--重构-->
<script setup lang="ts">
import {computed, inject, reactive, Ref, ref, watch} from "vue";
import {VideoData} from "@/types/AllData";
import request from "@/hooks/request";

const aComponent = inject('aComponent')
const changeComponent = inject('changeComponent')
const searchWord=inject<Ref<string|null>>('searchWord')
const searchTag=inject<Ref<number|null>>('searchTag')
const search=inject('search')
const playVideo=inject('playVideo')

const videos=ref<VideoData[]>([])

const query=reactive({
  searchWord:searchWord?.value,
  tagID:searchTag?.value,
  pageIndex:1,
  pageCapacity:20
})

const num=ref(0)
const sendSearch=async ()=>{
  num.value=await request.get('video/countSearch',{ searchWord:query.searchWord,tagID:query.tagID,pageIndex:1,pageCapacity:20})
  videos.value=await request.get('video/search',query)
}
sendSearch()
watch(searchWord||ref(),()=>query.searchWord=searchWord?.value)
watch(searchTag||ref(),()=>query.tagID=searchTag?.value)
watch(query,(n,o)=>{
  sendSearch()
})

const pageNum=computed(()=>(num.value-num.value%query.pageCapacity)/query.pageCapacity +1)
const thisPageVideo=computed(()=>videos.value)
// const thisPageVideo=computed(()=>videos.value.slice((query.value.pageIndex-1)*query.value.pageCapacity,query.value.pageIndex*query.value.pageCapacity))

</script>

<style scoped>
body{

}
a{
  text-decoration: none;
  font-size: 20px;

}
img{
  /*height: 30%;*/
}

.line-limit-length{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 150px;
}
</style>